<template>
    {%if pageConfig.outPutType == 'project' -%}
    <div class="{{pageConfig.name}}Wrap list_common">
    {% elseif pageConfig.outPutType == 'single' -%}
    <div class="{{pageConfig.name}}Wrap">
    {% endif -%}
        {%if pageConfig.area.showTitQuery && pageConfig.searchForm.length > 0 -%}
        <div class="titArea">
            <div class="titQuery">
                {%if isHasDateTimePicker(pageConfig.searchForm) && isLongLabel(pageConfig.searchForm) -%}
                <el-form inline class="el-form-item-dateTimePick el-form-item-rowTwo">
                {% elseif isHasDateTimePicker(pageConfig.searchForm) -%}
                <el-form inline class="el-form-item-dateTimePick">
                {% elseif isLongLabel(pageConfig.searchForm) -%}
                <el-form inline class="el-form-item-rowTwo">
                {% else -%}
                <el-form inline>
                {% endif -%}
                    {% for key,item in pageConfig.searchForm -%}
                    {%if item.type == 'Input' -%}
                    <!--输入框-->
                    <el-form-item label="{{item.label}}">
                        <el-input
                            v-model="searchParams.{{ item.model }}"
                            placeholder="{{item.placeholder}}"
                            maxlength="50"
                            clearable
                        ></el-input>
                    </el-form-item>
                    {% endif -%}
                    {%if item.type == 'Select' -%}
                    <!--选择框-->
                    <el-form-item label="{{item.label}}">
                        <el-select
                            v-model="searchParams.{{ item.model }}"
                            clearable
                            placeholder="{{item.placeholder}}"
                        >
                            {% for item in item.options -%}
                            <el-option
                                key="{{item.value}}"
                                label="{{item.label}}"
                                value="{{item.value}}"
                            />
                            {% endfor -%}
                        </el-select>
                    </el-form-item>
                    {% endif -%}
                    {%if item.type == 'DatePicker' || item.type == 'DateTimePicker' || item.type == 'datetimerange' -%}
                    <!--日期选择器-->
                    <el-form-item label="{{item.label}}">
                        <el-date-picker
                            v-model="searchParams.{{ item.model }}"
                            type="{{forMatDatePicker(item.type)}}"
                            placeholder="{{item.placeholder}}"
                        />
                    </el-form-item>
                    {% endif -%}
                    {%if item.type == 'TimePicker' -%}
                    <!--时间选择器-->
                    <el-form-item label="{{item.label}}">
                        <el-time-picker
                            v-model="searchParams.{{ item.model }}"
                            placeholder="{{item.placeholder}}"
                        />
                    </el-form-item>
                    {% endif -%}
                    {%if item.type == 'TimeSelect' -%}
                    <!--时间选择-->
                    <el-form-item label="{{item.label}}">
                        <el-time-select
                            v-model="searchParams.{{ item.model }}"
                            placeholder="{{item.placeholder}}"
                        />
                    </el-form-item>
                    {% endif -%}
                    {% endfor -%}
                </el-form>
            </div>
            {%if pageConfig.searchForm.length > 0 -%}
            <div class="titBtn">
                <el-button type="primary">查询</el-button>
                <el-button class="resetBtn">重置</el-button>
            </div>
            {% endif -%}
        </div>
        {% endif -%}
        {%if pageConfig.area.tableBtn -%}
        <div class="tableBtn">
            {% for key,item in pageConfig.btnUse -%}
            <el-button>{{ item.name }}</el-button>
            {% endfor -%}
        </div>
        {% endif -%}
        {%if pageConfig.area.tableArea -%}
        <div class="tableArea">
            <el-table
                v-loading="loading"
                stripe
                border
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                header-cell-class-name="dark-table-header"
                {%if pageConfig.tableConfig.selection -%}
                @selection-change="handleSelectionChange"
                {% endif -%}
                ref="tableComp"
            >
                {%if pageConfig.tableConfig.selection -%}
                <el-table-column type="selection" width="55" />
                {% endif -%}
                {%if pageConfig.tableConfig.orderNumber -%}
                <el-table-column label="序号" width="55">
                    <template #default="scope">
                        {{returnBrack('++scope.$index')}}
                    </template>
                </el-table-column>
                {% endif -%}
                {% for key,item in pageConfig.table -%}
                <el-table-column prop="{{item.prop}}" label="{{item.label}}" align="center" />
                {% endfor -%}
                {%if pageConfig.tableConfig.operation -%}
                <el-table-column label="操作">
                    <template #default="scope">
                        {% for key,item in pageConfig.tableConfig.operationBtn -%}
                        <a
                            href="javascript:void(0);"
                            class="operaBtn">
                            <span>{{item.name}}</span>
                        </a>
                        {% endfor -%}
                    </template>
                </el-table-column>
                {% endif -%}
            </el-table>
        </div>
        {% endif -%}
        {%if pageConfig.area.bottomArea -%}
        <div class="bottomArea">
            <el-pagination
                v-model="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
                :total="total"
                background
                layout="->, total, sizes, prev, pager, next, jumper"
                style="margin-top: 0px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
        {% endif -%}
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
            loading: false,
            tableData: [],
            currentPage: "",
            total: 100,
            searchParams:{
                {% for key,item in pageConfig.searchForm -%}
                {{ item.model }}: "",
                {% endfor -%}
            }
		}
    },
    created(){

    },
    watch: {

    },
    components: {

    },
    methods: {
        {%if pageConfig.area.showTitQuery && pageConfig.searchForm.length > 0 -%}
        resetSearch(){
            Object.keys(this.searchParams).forEach((key)=>{
                this.searchParams[key] = '';
            })
        },
        {% endif -%}
        {%if pageConfig.tableConfig.selection -%}
        handleSelectionChange(){

        },
        {% endif -%}
        {%if pageConfig.area.bottomArea -%}
        handleSizeChange(){

        },
        handleCurrentChange(){

        },
        {% endif -%}
    }
}
</script>
<style type="text/css" lang="less" scoped>
{%if pageConfig.outPutType == 'project' -%}
@import "@/style/list_common.less";
{% endif -%}
.{{pageConfig.name}}Wrap {
    {%if pageConfig.outPutType == 'single' -%}
    .titArea {
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e6ec;
    }
    .titQuery {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        .el-form-item {
            width: 28%;
            margin-top: 16px;
            margin-bottom: 0px;
            .el-form-item__label {
                width: 32%;
            }
        }
        .el-form-item-dateTimePick .el-form-item {
            width: 42%;
            .el-form-item__label {
                width: 22%;
            }
        }
        .el-form-item-rowTwo .el-form-item {
            width: 47%;
            .el-form-item__label {
                width: 32%;
            }
        }
        .el-form:not(.el-form-item-dateTimePick):not(.el-form-item-rowTwo) .el-form-item:nth-child(-n+3){
            margin-top: 0px;
        }
        .el-form-item-dateTimePick .el-form-item:nth-child(-n+2){
            margin-top: 0px;
        }
        .el-form-item-rowTwo .el-form-item:nth-child(-n+2){
            margin-top: 0px;
        }
    }
    .titBtn {
        margin-top: 15px;
    }
    .tableBtn {
        padding: 16px 0;
    }
    .bottomArea {
        padding-top: 16px;
        .bottomBtn {
            float: left;
        }
    }
    .operaBtn {
        color: #175eff;
        display: inline-block;
        padding: 2px 12px;
        font-size: 14px;
    }
    .operaBtn:hover {
        background-color: #eee;
    }
    .el-table td.el-table__cell {
        text-align: center;
    }
    {% endif -%}
}
</style>
